<template>
  <div class="maskCenter" :class="{ maskzindex: fullScreen }">
    <div
      id="box"
      :class="{
        systemDialog: visible,
        'systemDialog-hide': !visible,
        fullScreen: fullScreen,
      }"
      style="height: 700px; width: 800px"
    >
      <div class="dialog-header">
        <span>{{ title }}</span>
        <div class="header-right">
<!--          <el-tooltip
            v-if="!fullScreen"
            class="item"
            effect="dark"
            content="全屏"
            placement="top-start"
          >
            <span
              @click="handleFullScreen"
              class="icon iconfont iconquanping"
			  style="margin-right: 20px !important"
            ></span>
          </el-tooltip>
          <el-tooltip
            v-if="fullScreen"
            class="item"
            effect="dark"
            content="退出全屏"
            placement="top-start"
			style="margin-right: 20px !important"
          >
            <span @click="handleFullScreen" class="icon iconfont iconbtn"
              >&#xe66d;</span
            >
          </el-tooltip> -->
          <el-tooltip
            class="item"
            effect="dark"
            content="关闭"
            placement="top-start"
          >
            <span
              class="icon iconfont iconbiaoqianlan-guanbi close"
              @click="hide"
              style="margin-left: 10px"
            ></span>
          </el-tooltip>
        </div>
      </div>
      <div class="dialog-body" @contextmenu.prevent>
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="业务模型" name="first">
            <div id="viewDiagramDiv"></div>
            <ul
              class="rightcli"
              id="rightcli"
              ref="menu"
              :class="{ rightcliClose: flag == 0, rightcliOpen: flag == 1 }"
            >
              <!-- <li class="litem">
                <span class="drop-menu-item-icon iconliucheng-fasong"></span
                >激活
              </li>
              <li class="litem">
                <span class="drop-menu-item-icon iconliucheng-zuofei1"></span
                >作废
              </li> -->
              <li @click="fallback" class="litem">
                <span class="drop-menu-item-icon iconliucheng-huitui"></span
                >回退
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
      <cellView
        v-if="showCell"
        :jhId="wpInstNodeId"
        :nodeId="nodeId"
        :funcId="p_funcId"
        :funcName="funcName"
        :tdeptId="tdeptId"
        :wpId="p_wpId"
        :tworkId="p_workId"
        :wpInstNodeId="p_wpInstNodeId"
        :initParam="initParam"
        :businessInfo="wpVar"
        @close="closeCell"
		:acceptTime="acceptTime"
      ></cellView>
      <sysBussinessMenu
        v-if="showMessage"
        :viewPoint="viewPoint"
      ></sysBussinessMenu>
      <bussinessBack
        v-if="showBusinessBack"
        @close="closeBusinessBack"
        @ok="bussinessBack"
        :wpInstNodeId="wpInstNodeId"
      ></bussinessBack>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import cellView from "@/system/pages/cellView.vue";
import { wpimage, wpmessage } from "@/system/api/bussinessView";
import sysBussinessMenu from "@/system/components/sysBussinessMenu.vue";
import bussinessBack from "@/system/components/bussinessBack.vue";
import { deepCopy } from "@/utils/public";
import go from "gojs";
let gmake = go.GraphObject.make;
export default {
  directives: { movew },
  name: "winBussinessView",
  props: {
    wpId: { default: null }, //表单id
    funcId: { default: null }, //模块id
    tworkId: { default: null }, //具体表单数据 主键
    tinstNodeId: { default: null }, //流程实例节点id
    tdeptId: { default: null }, //部门id
    funcName: { default: null }, //模块名必须填写
    nodeId: { default: null }, //0只读，1编辑
    initParam: { default: null }, //表单初始化参数
    wpInstId: { default: null }, //业务模型实例id
    wpInstNodeId: { default: null }, //计划实例节点id  业务模型编辑要用
    wpInstUserId: { default: null }, //消息ID
	acceptTime:{ default: null }, //接受时间
  },
  data() {
    return {
      showBusinessBack: false,
      visible: true,
      info: {},
      myDiagram: null,
      lightText: "whitesmoke",
      model: {
        class: "GraphLinksModel",
        linkFromPortIdProperty: "fromPort",
        linkToPortIdProperty: "toPort",
        nodeDataArray: [],
        linkDataArray: [],
      },
      od: true,
      actvieNode: null, //gojs 中 当前  可用的节点
      activeName: "first",
      flag: -1, //流程节点右键

      sendtype: null,
      node: [],
      edge: [],
      bkcolor: ["#5cadff", "#19be6b", "#5E77FF"],
      lkcolor: ["#666"],
      showCell: false,
      view: null,
      title: "业务模型",
      fullScreen: true,
      timer: [],
      p_wpId: null,
      p_workId: null,
      p_wpInstNodeId: null,
      p_funcName: null,
      p_funcId: null,
      startTime: null,
      endTime: null,
      showMessage: false,
      viewPoint: null,
      businessInfo: null, //系统变量
    };
  },
  components: {
    cellView,
    sysBussinessMenu,
    bussinessBack,
  },
  mounted() {
    this.p_wpId = this.wpId;
    this.p_workId = this.workId;
    this.p_wpInstNodeId = this.wpInstNodeId;
    this.p_funcName = this.funcName;
    this.p_funcId = this.funcId;
    let self = this;

    this.myDiagram = gmake(
      go.Diagram,
      "viewDiagramDiv", // 网格锁定must name or refer to the DIV HTML element
      {
        initialContentAlignment: go.Spot.Center,
        allowDrop: true, // must be true to accept drops from the Palette
        scrollsPageOnFocus: false,
        "undoManager.isEnabled": true, // enable undo & redo
        allowRelink: true,
        padding: 0,
        isReadOnly: true,
        
        "draggingTool.isGridSnapEnabled": true, //自动锁定
        nodeSelectionAdornmentTemplate: gmake(
          go.Adornment,
          "Auto",
          gmake(go.Shape, "Rectangle", {
            fill: "white",
            stroke: null,
          })
        ),
        doubleClick: function (e) {},
      }
    );
    //右击事件
    function showContextMenu(obj, diagram, tool) {
      //右键要关闭 提示信息
      self.endTime = new Date(); //有结束时间  不会有提示信息
      self.showMessage = false; //如果提示信息已经存在了，那么需要关闭提示信息
      if (obj.data.enable&&self.$store.state.user.info.flag) {
        self.$refs.menu.style.setProperty("--height", 50 + "px");
        let mousePt = diagram.lastInput.viewPoint;
        self.$refs.menu.style.left = mousePt.x + "px";
        self.$refs.menu.style.top = mousePt.y + "px";
        self.flag = 1;
      } else {
        self.flag = -1;
      }
    }

    function hideContextMenu() {
      if (self.flag == 1) {
        self.flag = 0;
      }
    }
    var myContextMenu = gmake(go.HTMLInfo, {
      //右键菜单
      show: showContextMenu,
      hide: hideContextMenu,
    });

    //			var myToolTip = gmake(go.HTMLInfo, {
    //		      show: this.showToolTip,
    //		      hide: this.hideToolTip
    //		   });
    var nodeMouseEnter = function (e, node) {
      //节点鼠标悬停  鼠标移入
      if (self.flag == 0 || self.flag == -1) {
        //右键菜单显示中不显示提示信息
        self.startTime = new Date();
        self.endTime = null;
        setTimeout(() => {
          if (self.endTime == null) {
            self.viewPoint = {
              x: e.viewPoint.x + node.width / 4,
              y: e.viewPoint.y + 2 * node.height,
            };
            //							self.showMessage = true;//暂时不开放提示信息
          } else {
          }
        }, 1000);
      }
    };
    var nodeMouseLeave = function (e, node) {
      //节点鼠标悬停  鼠标移出  超过1秒半
      self.endTime = new Date();
      self.showMessage = false;
    };
    this.myDiagram.nodeTemplateMap.add(
      "all", //流程
      gmake(
        go.Node,
        "Spot",
        self.nodeStyle(),
        {
          contextMenu: myContextMenu,
          resizable: true,
          resizeObjectName: "PANEL",
          //						toolTip: myToolTip,//tooltip  有时有，有时没，换成鼠标移入事件
          mouseEnter: nodeMouseEnter,
          mouseLeave: nodeMouseLeave,
          doubleClick: function (e, node) {
            //节点双击  打开表单

            if (node.data.enable) {
              //								self.showCell = true;
              self.wpmessage();
            }
          },
          //	            isShadowed: true,//加阴影
        },
        gmake(
          go.Panel,
          "Auto",
          gmake(
            go.Shape,
            "RoundedRectangle",
            {
              fill: "rgba(83, 168, 255, 1)",
              stroke: "#09d3ac",
              strokeWidth: 0,
              name: "nodeshape",
              minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
            },
            new go.Binding("fill", "bkcolor").makeTwoWay()
          ),
          gmake(
            go.TextBlock,
            {
              font: "bold 12px Helvetica, Arial, sans-serif",
              stroke: this.lightText, //stroke  字体
              wrap: go.TextBlock.WrapFit,
              textAlign: "center",
              editable: false,
              name: "nodetext",
            },
            new go.Binding("text").makeTwoWay(),

            new go.Binding("nodestate").makeTwoWay()
          )
        ),
        new go.Binding("width").makeTwoWay(),
        new go.Binding("height").makeTwoWay(),
        // three named ports, one on each side except the top, all output only:
        this.makePort("T", go.Spot.Top, true, true),
        this.makePort("L", go.Spot.Left, true, true),
        this.makePort("R", go.Spot.Right, true, true),
        this.makePort("B", go.Spot.Bottom, true, true)
      )
    );

    this.myDiagram.nodeTemplateMap.add(
      "Start", //开始
      gmake(
        go.Node,
        "Spot",
        self.nodeStyle(),
        {
          contextMenu: myContextMenu,
          resizable: true,
          resizeObjectName: "PANEL",
          doubleClick: function (e, node) {
            if (node.data.enable) {
              self.showCell = true;
            }
          },
          //	            isShadowed: true,//加阴影
        },
        gmake(
          go.Panel,
          "Auto",
          gmake(
            go.Shape,
            "Ellipse",
            {
              //	                minSize: new go.Size(35, 35),
              fill: "rgba(83, 168, 255, 1)",
              stroke: "#00A9C9",
              strokeWidth: 0,
              name: "nodeshape",
              minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
            },
            new go.Binding("fill", "bkcolor").makeTwoWay(),
            new go.Binding("figure", "figure")
          ),
          gmake(
            go.TextBlock,
            "Start",
            {
              font: "bold 12px Helvetica, Arial, sans-serif",
              stroke: this.lightText,
              textAlign: "center",
              name: "nodetext",
            },
            new go.Binding("text").makeTwoWay(),
            new go.Binding("nodestate").makeTwoWay()
          )
        ),
        new go.Binding("width").makeTwoWay(),
        new go.Binding("height").makeTwoWay(),
        this.makePort("T", go.Spot.Top, true, false),
        this.makePort("L", go.Spot.Left, true, false),
        this.makePort("R", go.Spot.Right, true, false),
        this.makePort("B", go.Spot.Bottom, true, false)
      )
    );

    self.myDiagram.nodeTemplateMap.add(
      "End",
      gmake(
        go.Node,
        "Spot",
        this.nodeStyle(),
        {
          resizable: true,
          resizeObjectName: "PANEL",
          //	            isShadowed: true,//加阴影
          doubleClick: function (e, node) {
            console.log(node);
          },
        },
        gmake(
          go.Panel,
          "Auto",
          gmake(
            go.Shape,
            "Ellipse",
            {
              //	              minSize: new go.Size(35, 35),
              fill: "rgba(83, 168, 255, 1)",
              stroke: "#009688",
              strokeWidth: 0,
              name: "nodeshape",
              minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
            },
            new go.Binding("fill", "bkcolor").makeTwoWay()
          ),
          gmake(
            go.TextBlock,
            "End",
            {
              font: "bold 12px Helvetica, Arial, sans-serif",
              stroke: this.lightText,
              textAlign: "center",
              name: "nodetext",
            },
            new go.Binding("text").makeTwoWay(),
            new go.Binding("nodestate").makeTwoWay()
          )
        ),
        new go.Binding("width").makeTwoWay(),
        new go.Binding("height").makeTwoWay(),
        this.makePort("T", go.Spot.Top, false, true),
        this.makePort("L", go.Spot.Left, false, true),
        this.makePort("R", go.Spot.Right, false, true),
        this.makePort("B", go.Spot.Bottom, false, true)
      )
    );
    //	      self.myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    //	      self.myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal; //线的转弯
    self.myDiagram.nodeTemplateMap.add(
      "textblo",
      gmake(
        go.Node,
        "Auto",
        self.nodeStyle(),
        {
          resizable: true,
          resizeObjectName: "PANEL",
          text: "node",
          doubleClick: function (e, node) {
            console.log(node);
          },
          //	            isShadowed: true,//加阴影
        },
        gmake(
          go.Panel,
          "Auto",
          gmake(
            go.Shape,
            {
              fill: "rgba(83, 168, 255, 1)",
              stroke: "#607d8b",
              strokeWidth: 0,
              name: "nodeshape",
              minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
            },
            new go.Binding("fill", "bkcolor").makeTwoWay(),
            new go.Binding("text").makeTwoWay()
          ),
          gmake(
            go.TextBlock,
            {
              margin: 5,
              wrap: 30,
              textAlign: "center",
              editable: true,
              font: "Arial",
              stroke: "#ffffff",
              name: "nodetext",
            },
            new go.Binding("text").makeTwoWay(),
            new go.Binding("nodestate").makeTwoWay()
          ),
          new go.Binding("text").makeTwoWay()
        )
      )
    );

    self.myDiagram.nodeTemplateMap.add(
      "Comment",
      gmake(
        go.Node,
        "Spot",
        self.nodeStyle(),
        {
          resizable: true,
          resizeObjectName: "PANEL",
          click: function (e, node) {
            console.log(node);
          },
          doubleClick: function (e, node) {
            console.log(node);
          },
          //	            isShadowed: true,//加阴影
        },
        gmake(
          go.Panel,
          "Auto",
          gmake(
            go.Shape,
            "Diamond",
            {
              //	              minSize: new go.Size(60, 30),
              fill: "rgba(83, 168, 255, 1)",
              stroke: null,
              strokeWidth: 0,
              name: "nodeshape",
              minSize: new go.Size(60, 30), //设置了大小，那么手动调节的地方也要设置
            },
            new go.Binding("fill", "bkcolor").makeTwoWay()
          ),
          gmake(
            go.TextBlock,
            "???",
            {
              wrap: go.TextBlock.WrapFit,
              textAlign: "center",
              font: "bold 12px Helvetica, Arial, sans-serif",
              stroke: "#fff",
              name: "nodetext",
            },
            new go.Binding("text").makeTwoWay(),
            new go.Binding("nodestate").makeTwoWay()
          )
        ),
        new go.Binding("width").makeTwoWay(),
        new go.Binding("height").makeTwoWay(),
        this.makePort("T", go.Spot.Top, true, true),
        this.makePort("L", go.Spot.Left, true, true),
        this.makePort("R", go.Spot.Right, true, true),
        this.makePort("B", go.Spot.Bottom, true, true)
      )
    );

    self.myDiagram.linkTemplate = gmake(
      go.Link, // the whole link panel
      {
        routing: go.Link.AvoidsNodes,
        selectionAdorned: true,
        mouseEnter: function (e, link) {
          link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
        },
        mouseLeave: function (e, link) {
          link.findObject("HIGHLIGHT").stroke = "transparent";
        },
        doubleClick: function (e, link) {
          console.log(link);
        },
      },
      gmake(
        go.Shape, // the highlight shape, normally transparent
        {
          isPanelMain: true,
          strokeWidth: 8,
          stroke: "transparent",
          name: "HIGHLIGHT",
        }
      ),
      gmake(
        go.Shape, // the link path shape
        {
          isPanelMain: true,
          stroke: "gray",
          strokeWidth: 2,
        },
        new go.Binding("stroke", "lkcolor").makeTwoWay()
        //						new go.Binding("stroke", "isSelected", function(sel) {
        //							return sel ? "dodgerblue" : "gray";
        //						}).ofObject()
      ),
      gmake(
        go.Shape, // the arrowhead
        {
          toArrow: "standard",
          stroke: "gray",
          fill: "gray",
        },
        new go.Binding("stroke", "lkcolor").makeTwoWay(),
        new go.Binding("fill", "lkcolor").makeTwoWay()
      ),
      gmake(
        go.Panel,
        "Auto", // the link label, normally not visible
        {
          visible: true,
        },
        new go.Binding("visible", "visible").makeTwoWay(),
        gmake(
          go.Shape,
          "RoundedRectangle", // the label shape
          {
            fill: "transparent",
            stroke: null,
          }
        ),
        gmake(
          go.TextBlock,
          " ", // the label
          {
            textAlign: "center",
            font: "10pt helvetica, arial, sans-serif",
            stroke: "#999",
            editable: false,
          },
          new go.Binding("text").makeTwoWay(),
          new go.Binding("name").makeTwoWay()
        )
      )
    ); //线上文字

    this.wpimage();
  },
  methods: {
    //回退业务模型
    fallback() {
      this.flag = 0;
      this.showBusinessBack = true;
    },
    closeBusinessBack() {
      this.showBusinessBack = false;
    },
    bussinessBack() {
      //计划发送界面   点击回退后 关闭业务回退界面
      this.showBusinessBack = false;
      this.hide();
      setTimeout(() => {
        this.$emit("close", true);
      }, 400);
    },
    tabClick(tab, e) {
      if (this.activeName == "first") {
        this.flag = -1;
      }
    },
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close", false);
      }, 400);
    },
    nodeStyle(e, obj) {
      let _this = this;
      return [
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
          go.Point.stringify
        ),
        {
          locationSpot: go.Spot.Center,
          mouseEnter: function (e, obj) {
            _this.showPorts(obj.part, true);
          },
          mouseLeave: function (e, obj) {
            _this.showPorts(obj.part, false);
          },
        },
      ];
    },
    showPorts(node, show) {
      var diagram = node.diagram;
      if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
      node.ports.each(function (port) {
        port.stroke = show ? "white" : null;
      });
    },
    //当鼠标选中的时候出现可以连线的点，一般有上下左右四个点
    makePort(name, spot, output, input) {
      //不能用demo4的  makePort  要不然边框会缺失
      // the port is basically just a small circle that has a white stroke when it is made visible
      return go.GraphObject.make(go.Shape, "Circle", {
        fill: "transparent",
        stroke: null, // this is changed to "white" in the showPorts function
        desiredSize: new go.Size(8, 8),
        name: name + "circle",
        alignment: spot,
        alignmentFocus: spot, // align the port on the main Shape
        portId: name, // declare this object to be a "port"
        fromSpot: spot,
        toSpot: spot, // declare where links may connect at this port
        fromLinkable: output,
        toLinkable: input, // declare whether the user may draw links to/from here
        cursor: "pointer", // show a different cursor to indicate potential link point
      });
    },
    setNode(tnode) {
      //流程图的节点  跟 后台数据的节点  比较  如果他们key相同说明 是同一个节点
      for (let i = 0; i < this.node.length; i++) {
        let node = this.node[i];
        if (node.wpNodeCode == tnode.key) {
          if (node.state == 0) {
            //设置节点状态(0：可执行，1：执行中，2：已完成)
            this.myDiagram.model.setDataProperty(tnode, "enable", true); //设置节点可用
            this.actvieNode = tnode;
            this.timer.push(setInterval(this.setActiveNode, 800)); //设置节点闪烁
          }
          this.myDiagram.model.setDataProperty(
            tnode,
            "bkcolor",
            this.bkcolor[node.state]
          );
        }
      }
    },
    setLink(tedge) {
      this.edge.forEach((edge, index) => {
        if (edge.wpEdgeCode == tedge.key) {
          this.myDiagram.model.setDataProperty(
            tedge,
            "lkcolor",
            this.lkcolor[0]
          );
        }
      });
    },
    initNode() {
      //遍历  初始化节点  不可用
      this.myDiagram.model.nodeDataArray.forEach((node, index) => {
        this.myDiagram.model.setDataProperty(node, "enable", false);
        this.myDiagram.model.setDataProperty(node, "bkcolor", "#c5c8ce");
        this.setNode(node);
      });
      this.myDiagram.model.linkDataArray.forEach((link, index) => {
        this.myDiagram.model.setDataProperty(link, "lkcolor", "#c5c8ce");
        this.setLink(link);
      });
    },
    wpimage() {
      //根据流程实例id  获取流程信息并用gojs  展现  然后初始化节点   打开流程图
      let param = { wpInstUserId: this.wpInstUserId };
      wpimage(param).then((res) => {
        if (res.success) {
          this.myDiagram.model = go.Model.fromJson(res.info.pic);
          this.node = res.info.node;
          this.edge = res.info.edge;

          if (res.info.wpName) {
            this.title = res.info.wpName;
          }


          let varObj = {}

          res.info.var.forEach((tvar) => {
            varObj[tvar.name] = tvar.value
          });

          this.wpVar = varObj
          //wpId:null,	tworkId:   就是dataId,
          this.initNode();
        }
      });
    },
    setActiveNode() {
      //设置闪动节点
      if (this.actvieNode) {
        if (this.od) {
          this.myDiagram.model.setDataProperty(
            this.actvieNode,
            "bkcolor",
            "rgba(92, 173, 255,0.85)"
          );
        } else {
          this.myDiagram.model.setDataProperty(
            this.actvieNode,
            "bkcolor",
            "#5cadff"
          );
        }
        this.od = !this.od;
      }
    },
    closeCell(e) {
      //表单发送流程后的关闭  需要关闭流程展示界面   ， 如果是手动关闭表单，不用关闭流程界面
      this.showCell = false;
      if (e) {
        setTimeout(() => {
          this.$emit("close", true);
        }, 400);
      }
    },
    handleFullScreen() {
      this.fullScreen = !this.fullScreen;
    },
    getInstNodeId(tnode) {
      let nodeId = null;
      this.node.forEach((node, index) => {
        if (tnode.key == node.wpNodeCode) {
          nodeId = node.wpInstNodeId;
        }
      });
      return nodeId;
    },
    wpmessage() {
      //	双击获取  表单信息
      wpmessage({ wpInstUserId: this.wpInstUserId }).then((res) => {
        if (res.success) {
          if (res.info.formIdArr || res.info.menuId) {
            //如果 表单id  为空   那么 要打开vue 文件
            this.p_wpId = res.info.formIdArr; //多表单 用逗号隔开
            // this.p_workId = res.info.dataId;
            this.p_workId = res.info.workId;
            this.p_wpInstNodeId = res.info.wpinstNodeId;
            this.p_funcName = res.info.menuName;
            this.p_funcId = res.info.menuId;
            this.businessInfo = res.info.businessInfo;
            this.showCell = true;
          }
        }
      });
    },
  },

  beforeDestroy() {
    if (this.timer.length > 0) {
      this.timer.forEach((t) => {
        clearInterval(this.t);
      });
    }
  },
};
</script>

<style scoped>
.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-body {
  flex-direction: row;
  color: var(--system-page-topbar-text-color);
}

#viewDiagramDiv {
  flex-grow: 1;
  background-color: var(--page-back-color);
  height: 100%;
  width: 100%;
}

#viewDiagramDiv >>> :focus {
  outline: none !important;
}

#viewDiagramDiv >>> canvas {
  height: 100%;
}
#viewDiagramDiv >>> div {
  height: 100%;
}
/*tabs 样式*/
>>> .el-tabs__header {
  margin: 0px;
  margin-bottom: 16px;
}
.el-tabs {
  height: 100%;
}
>>> .el-tabs__active-bar {
  width: 80px !important;
}
>>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}
>>> .el-tabs__item {
  padding: 0 !important;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
  text-align: center;
  border: none;
  min-width: 80px;
}
/*活动颜色*/
>>> .el-tabs__item.is-active {
  color: var(--active-color);
}
/*tabs 分割线*/
>>> .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--page-hr-line-color);
}
/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel >>> .el-form-item__content {
  margin-left: 0 !important;
}
>>> .el-tabs__content {
  height: calc(100% - 30px);
  padding-bottom: 20px;
}
>>> .el-tab-pane {
  height: 100%;
}
#rightcli {
  --height: 80px;
}
.rightcli {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  text-align: center;
  list-style: none;
  z-index: 99;
  background: var(--page-back-color);
  color: var(--page-lable-text-color);
  box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color),
    0px -10px 20px 0px var(--drop-menu-boxshadow-color);
  font-size: 14px;
  border-radius: 4px;
  height: 0;
  overflow: hidden;
}
.rightcli li {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.rightcli li:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.rightcli li:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}
.litem:first-child {
  margin-top: 10px;
}
.drop-menu-item-icon {
  color: var(--icon-color);
  font-family: "iconfont";
  margin-left: 17px;
  font-size: 15px;
  margin-right: 10px;
}
.rightcliOpen {
  height: var(--height);
  animation: menuopen 0.3s;
}
@keyframes menuopen {
  from {
    height: 0;
  }
  to {
    height: var(--height);
  }
}
.rightcliClose {
  height: 0;
  animation: menuclose 0.3s;
}
@keyframes menuclose {
  from {
    height: var(--height);
  }
  to {
    height: 0;
  }
}
/*下拉框不可用*/
.disable {
  background: var(--tag-button-disable-back-color);
}
.maskzindex {
  z-index: 99;
}
.fullScreen {
  z-index: 1;
  position: fixed !important;
  top: 78px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 75px !important;
  width: calc(100% - 75px) !important;
  height: calc(100% - 78px) !important;
}
.iconbtn {
  margin-right: 9px;
}
</style>
